<template>

    <div class="Detail">
        <!-- 退货商品部分 -->
        <div class="top">
            <p>退货商品</p>
            <el-table :data="listParams" border style="width: 100%">
                <el-table-column prop="productPic" label="商品图片" align="center">
                    <template #default="scope">
                        <img :src="scope.row.productPic" alt="" style="width:80px">
                    </template>
                </el-table-column>
                <el-table-column label="商品名称" align="center" width="280">
                    <template #default="scope">
                        <div>{{ scope.row.productName }}</div>
                        <span>品牌: {{ scope.row.productBrand }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="价格/货号" align="center">
                    <template #default="scope">
                        <div>价格:￥{{ scope.row.productRealPrice }}</div>
                        <span>货号: NO.{{ scope.row.productId }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="productAttr" label="属性" align="center" />
                <el-table-column prop="productCount" label="数量" align="center" width="110" />
                <el-table-column label="小计" align="center" width="110">
                    <template #default="scope">
                        <span>￥ {{ scope.row.productRealPrice }} </span>
                    </template>
                </el-table-column>
            </el-table>
            <div class="sum">
                <span>合计:
                    <span class="total">
                        ￥ {{ list?.productRealPrice }}
                    </span>
                </span>
            </div>
        </div>

        <!-- 服务单信息 -->
        <div class="service_order">
            <p>服务单信息</p>
            <table class="int_one">
                <tr>
                    <td class="one_left">服务单号</td>
                    <td>{{ list?.id }}</td>
                </tr>
                <tr>
                    <td class="one_left">申请状态</td>
                    <td>{{ fomatStatus(list?.status) }}</td>
                </tr>
                <tr>
                    <td class="one_left">订单编号</td>
                    <td>
                        {{ list?.orderSn }}
                        <el-button type="primary" link @click="router.push(`/oms/orderDetail?id=${list?.orderId}`)">查看
                        </el-button>
                    </td>
                </tr>
                <tr>
                    <td class="one_left">申请时间</td>
                    <td>{{ fomatDate(list?.createTime) }}</td>
                </tr>
                <tr>
                    <td class="one_left">用户账号</td>
                    <td>{{ list?.memberUsername }}</td>
                </tr>
                <tr>
                    <td class="one_left">联系人</td>
                    <td>{{ list?.companyAddress.name }}</td>
                </tr>
                <tr>
                    <td class="one_left">联系电话</td>
                    <td>{{ list?.companyAddress.phone }}</td>
                </tr>
                <tr>
                    <td class="one_left">退货原因</td>
                    <td>{{ list?.reason }}</td>
                </tr>
                <tr>
                    <td class="one_left">问题描述</td>
                    <td>{{ list?.description }}</td>
                </tr>
                <tr>
                    <td class="one_left">凭证图片</td>
                    <td>
                        <img :src="list?.productPic" alt="" style="width: 80px;">
                    </td>
                </tr>
            </table>

            <table class="int_two">
                <tr>
                    <td class="one_left">订单金额</td>
                    <td> ￥ {{ list?.productRealPrice }}</td>
                </tr>
                <tr>
                    <td class="one_left">确认退款金额</td>
                    <td class="one_right">￥
                        <el-input disabled :placeholder="list?.returnAmount" />
                    </td>
                </tr>
                <tr>
                    <td class="one_left">选择收货点</td>
                    <td>
                        <el-select class="m-2" disabled :placeholder="list?.companyAddress.addressName" size="small" />
                    </td>
                </tr>
                <tr>
                    <td class="one_left">收货人姓名</td>
                    <td>{{ list?.companyAddress.name }}</td>
                </tr>
                <tr>
                    <td class="one_left">所在区域</td>
                    <td>{{ list?.companyAddress.province }} {{ list?.companyAddress.region }} </td>
                </tr>
                <tr>
                    <td class="one_left">详细地址</td>
                    <td>{{ list?.companyAddress.detailAddress }}</td>
                </tr>
                <tr>
                    <td class="one_left">联系电话</td>
                    <td>{{ list?.companyAddress.phone }}</td>
                </tr>
            </table>

            <table class="int_three">
                <tr>
                    <td class="one_left">处理人员</td>
                    <td> {{ list?.receiveMan }}</td>
                </tr>
                <tr>
                    <td class="one_left">处理时间</td>
                    <td>{{ fomatDate(list?.handleTime) }} </td>
                </tr>
                <tr>
                    <td class="one_left">处理备注</td>
                    <td> {{ list?.handleNote }}</td>
                </tr>
            </table>

            <table class="int_three">
                <tr>
                    <td class="one_left">收货人员</td>
                    <td> {{ list?.receiveMan }}</td>
                </tr>
                <tr>
                    <td class="one_left">收货时间</td>
                    <td>{{ fomatDate(list?.receiveTime) }} </td>
                </tr>
                <tr>
                    <td class="one_left">收货备注</td>
                    <td> {{ list?.receiveNote }}</td>
                </tr>
            </table>
        </div>
    </div>


</template>

<script setup lang="ts">
import { user } from "@/api"
import { reactive, toRefs, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { fomatDate, fomatStatus } from "@/utils"

// 获取路由实例
const route = useRoute()

// 创建路由实例
const router = useRouter()


// 发起请求  拿id获取相应的数据详情
const id = Number(route.query.id)
const listParams = ref<any>([])
const list = ref<IApplyDetailsParams>()
const getApplyDetail = () => {
    user.getApplyDeatils(id).then((res) => {
        if (res.code === 200) {
            list.value = res.data
            listParams.value.push(list.value)
        }
    })
}
getApplyDetail()

</script>

<style lang="less" scoped>
.Detail {
    width: 1100px;
    margin: 50px auto;

    .top {
        padding: 10px;
        box-sizing: border-box;
        border: 1px solid #ebeef5;


        .sum {
            display: flex;
            justify-content: end;
            margin-top: 10px;

            .total {
                color: red;
            }
        }
    }

    .service_order {
        padding: 10px;
        box-sizing: border-box;
        border: 1px solid #ebeef5;
        margin-top: 20px;

        table {
            border-collapse: collapse;
            width: 100%;

            tr,
            td {
                padding: 10px;
                border: 1px solid #dfe2e8;
                color: #676a6e;
            }

            .one_left {
                width: 250px;
                background-color: #f2f6fc;
            }

            .one_right {
                display: flex;


                .el-input {
                    width: 180px;
                }
            }
        }

        .int_two {
            margin-top: 20px;
        }

        .int_three {
            margin-top: 20px;
        }
    }
}
</style>